<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app">
    <component1></component1>
</div>

<template id="component1">
    <div>
        <h2>{{mes1}}</h2>
        <h2>我的第一个组件</h2>
        <component2></component2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 组件可以访问Vue实例的数据吗？
     * 答案是不能
     *
     * 组件是一个单独功能模块的封装（相当于一个小的Vue实例）：
     * 就是这个模块有属于自己的HTML模板，也有自己属性数据data

     * 组件数据怎么存放呢？
     * 组件对象也有一个data属性，但是data属性必须是一个函数，然后这个返回的对象，对象内部保证这数据
     */
    const component1 = {
        template: '#component1',
        data() {
            return {mes1: "组件数据"};
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            mes: "实例数据"
        },
        components: {
            'component1': component1
        }
    })

</script>
</html>